<template>
  <div>

    <van-row style="padding-top: 1rem;padding-bottom: 1rem">
      <van-col span="12">
        <van-row>
          <van-col span="12">角色名称:<input type="text"></van-col>
          <van-col span="3"><van-button  size="small" type="primary" >查询</van-button></van-col>
          <van-col span="3"><van-button size="small">重置</van-button></van-col>
        </van-row>
      </van-col>
      <van-col span="12">
        <van-row>
          <van-col span="12">用户名称:<input type="text"></van-col>
          <van-col span="3"><van-button  size="small" type="primary">查询</van-button></van-col>
          <van-col span="3"><van-button size="small">重置</van-button></van-col>
        </van-row>
      </van-col>
    </van-row>
    <van-row>
      <van-col span="12">
        <table align="center" border="1px" cellspacing="1px" width="100%">
          <tr>
            <th><input type="checkbox"></th>
            <th style="width: 20%">序号</th>
            <th style="width: 20%">角色名称</th>
            <th style="width: 20%">角色编码</th>
            <th style="width: 20%">操作</th>
          </tr>
          <tr v-for="role in rolelist" :key="role.id" @click="getuser(role.id)">
            <th><input type="checkbox" v-model="role.id"></th>
            <td style="width: 20%">{{role.id}}</td>
            <td style="width: 20%">{{role.name}}</td>
            <td style="width: 20%">{{role.num}}</td>
            <td style="width: 20%"><font color="blue">编辑</font>&nbsp;<font color="blue">删除</font></td>
          </tr>
        </table>
      </van-col>
      <van-col span="12">
        <table align="center" border="1px" cellspacing="1px" width="80%">
          <tr>
            <th><input type="checkbox"></th>
            <th style="width: 25%">用户账号</th>
            <th style="width: 25%">用户名称</th>
            <th style="width: 25%">用户操作</th>
          </tr>
          <tr v-for="user in userlist" :key="user.id">
            <th><input type="checkbox"></th>
            <td style="width: 25%">{{user.acount}}</td>
            <td style="width: 25%">{{user.name}}</td>
            <td style="width: 25%"><font color="blue">编辑</font>&nbsp;<font color="blue">删除</font></td>
          </tr>
        </table>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import myaxios from "../../../https/myaxios";
export default {
  name: "role_manage",
  data(){
    return{
      rolelist:[],
      userlist:[]
    }
  },
  methods:{
    getrole(){
      myaxios("getrole","get").then(res=>{
        this.rolelist=res.list
      })
    },
    getuser(id){
      myaxios("getuser?roleid="+id,"get").then(res=>{
        this.userlist=res.list
      })
    }
  },
  mounted() {
    this.getrole()
  }
}
</script>

<style scoped>

</style>